<template>
    <div>
        <!-- <div v-if="isLoading" id="loading" style="width:100%;height:100vh;    align-items: center;display: flex;justify-content: center;">
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
                <rect x="0" y="10" width="4" height="10" fill="#333" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite" />
                </rect>
                <rect x="8" y="10" width="4" height="10" fill="#333" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite" />
                </rect>
                <rect x="16" y="10" width="4" height="10" fill="#333" opacity="0.2">
                    <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                    <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite" />
                </rect>
            </svg>
        </div> -->
        <div class="container_payroll">
            <mt-header fixed title="工资条"></mt-header>
            <div class="payrolistdiv" v-for="item in payrolldata">
                <h3 class="title"><span>{{item.year}}年</span></h3>
                <div class="Payroll_card" v-for="list in item.list" @click="goDetails(item.year,list.id)" v-if="item.list.length !=0">
                    <div class="pay_card">
                        <div class="top_card">
                            <span class="month">{{list.month}}&nbsp;&nbsp;&nbsp;&nbsp;月</span>
                            <span class="looksclas">查看详情</span>
                        </div>
                        <div class="receipts">
                            <span class="recetitle">进账：</span>
                            <span class="manys">{{list.initial_amount}}元</span>
                        </div>
                    </div>
                </div>
                <div v-if="item.list.length == 0" style="color: #808080;text-align: center;margin-top: 37.5px;font-size:0.45rem;">
                    暂无数据
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import config from '~/assets/api/config'

export default {
    data() {
        return {
            isLoading: true,
            payrolldata: [] //列表数据
        }
    },
    methods: {
        getsalary() {
            this.$axios
                .get(config.API_BES_URL + '/api/backend/v1/member/salary')
                .then(res => {
                    if (res.data.code == 0) {
                        this.payrolldata = res.data.data
                    }
                })
        },
        goDetails(year, list) {
            //查看详情
            this.$router.push({
                name: 'Detailswages',
                query: { salary: list, year: year }
            })
        }
    },
    mounted() {
        this.getsalary()
        setTimeout(() => {
            this.isLoading = false
        }, 500)
    }
}
</script>

<style lang="less">
.mint-header{
        height: 1.173333rem !important;
            font-size: 0.45rem !important;
    background: #fff !important;
    color: #2e2e2e !important;
    border-bottom: 0.016667rem solid #f8f8f8 !important;
}
.container_payroll {
    width: 100%;
    margin: 0 auto;
    .payrolistdiv {
        padding: 15px;
        h3.title {
            text-align: center;
            margin-top:100px;
        }
        h3.title span {
            display: block;
            font-size: 26.25px;
            color: #626262;
            position: relative;
        }
        h3.title span:before,
        h3.title span:after {
            content: '';
            position: absolute;
            top: 52%;
            background: #ccc;
            width: 30%;
            height: 3px;
        }
        h3.title span:before {
            left: 10%;
        }
        h3.title span:after {
            right: 10%;
        }
        .Payroll_card {
            position: relative;
            width: 100%;
            height: 187.5px;
            margin-top: 15px;
            background: url('../../assets/image/bg_bill.png') no-repeat;
            background-size: 100% 100%;
            .pay_card {
                padding: 0 30px;
                height: 100%;
                .top_card {
                    height: 67.5px;
                    padding: 22.5px 15px 0 15px;
                    border-bottom: 1.25px dashed #ffc63f;
                    .month {
                        font-size: 26.25px;
                        background: url('../../assets/image/monthicon.png')
                            no-repeat;
                        background-size: 100%;
                        height: 41.25px;
                        width: 112.5px;
                        float: left;
                        color: #fff;
                        text-align: center;
                    }
                    .looksclas {
                        font-size: 26.25px;
                        float: right;
                        color: #808080;
                    }
                }
                .receipts {
                    padding: 26.25px 15px 0 15px;
                    .recetitle {
                        font-size: 26.25px;
                        color: #808080;
                        float: left;
                    }
                    .manys {
                        float: right;
                        font-size: 30px;
                        color: #e6ba41;
                    }
                }
            }
        }
    }
    .bottom-title {
        text-align: center;
        float: left;
        width: 100%;
        height: 75px;
        margin-top: 22.5px;
        margin-bottom: 90px;
        span {
            display: block;
            font-size: 22.5px;
            color: #ddd;
            position: relative;
        }
        span:before,
        span:after {
            content: '';
            position: absolute;
            top: 52%;
            background: #ddd;
            width: 30%;
            height: 1.25px;
        }
        span:before {
            left: 10%;
        }
        span:after {
            right: 10%;
        }
    }
}
</style>
